<template>
  <div class="echart" id="chartline" ref="chartLine"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, onUnmounted, nextTick, ref, watch } from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import moment from 'moment'

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
]);
export default defineComponent({
  props: {
    days: Array,
    actualSurplus: Array,
    idealSurplus: Array
  },
  setup(props) {
    const state = reactive({
      days: props.days,
      actualSurplus: props.actualSurplus,
      idealSurplus: props.idealSurplus,
    })

    const chartLine = ref(null);
    let mychart:any = null;

    onMounted(()=>{
      mychart && mychart.dispose();
      mychart = echarts.init(chartLine.value);
      renderEChart();
      window.addEventListener('resize', ()=>{
        mychart.resize();
      })
    })

    watch(()=>props.days, (val)=>{
      state.days = val;
        renderEChart();
    },{
      deep: true
    })
    watch(()=>props.idealSurplus, (val)=>{
      state.idealSurplus = val;
        renderEChart();
    },{
      deep: true
    })
    watch(()=>props.actualSurplus, (val)=>{
      state.actualSurplus = val;
        renderEChart();
    },{
      deep: true
    })

    // 日期去除年份,可选
    const dateFormat = (arr)=> {
      let days = arr.map((item,i)=>{
        if(i == 0) {
          return item;
        }else {
          return moment(item).format('MM-DD');
        }
      })
      return days;
    }

    const renderEChart = ()=> {
      mychart.setOption({
        title: {
          text: '燃尽图',
          textStyle: {
            color: '#333',
            fontSize: 16,
            fontWeight: 'normal'
          },
          padding: [20,16,16,16],
        },
        color: ['#1890FF','#7ED321'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: '#dedede',                                        
            }
          },
          formatter: function(params:any) {
            let str = `${params[0]?.name}<br/>` || '';
            params.forEach((item, idx) => {
              str += `${item.marker}${item.seriesName}: ` + Math.round(item.data * 10) / 10
              str += idx === params.length -1? '': '<br/>'
            })
            return str
          }
        },
        legend: {
          data: ['实际剩余','理想剩余'],
          padding: [49,5,5,5],
          textStyle: {
            color: '#666',
            fontSize: 14
          },
          itemWidth: 16,
          itemHeight: 8,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          top: '19%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#E9E9E9'
            }
          },
          // data: ['','07-12', '07-13', '07-14', '07-15', '07-16', '07-17', '07-19','07-20', '07-21', '07-22', '07-23',],
          data: dateFormat(state.days),
          axisLabel:{ interval: 0, margin: 16, color: 'rgba(0,0,0,0.65)' }
        },
        yAxis: {
          type: 'value',
          splitNumber: 6, 
          minInterval: 1,
          min: 0,
          // @ts-ignore
          max: state.idealSurplus?.length?null:25,
          axisLine: {
          show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel:{ margin: 16, color: 'rgba(0,0,0,0.65)' }
        },
        series: [
          {
            name: '实际剩余',
            type: 'line',
            stack: '实际剩余',
            // data: [33, 32, 29],
            data: state.actualSurplus,
            symbolSize: 6,
            lineStyle: {
              width: 2,
            },
            emphasis: {
              lineStyle: {
                width: 2,
              }
            },
          },
          {
            name: '理想剩余',
            type: 'line',
            stack: '理想剩余',
            // data: [33, 30, 27, 24, 21, 18, 15, 12, 9, 6, 3, 0],
            data: state.idealSurplus,
            symbolSize: 6,
            lineStyle: {
              width: 2,
            },
            emphasis: {
              lineStyle: {
                width: 2,
              }
            },
          }
        ]
      })
    }
    onUnmounted(() => {
      window.removeEventListener('resize', ()=>{
        return false;
      })
    })

    return {
      ...toRefs(state),
      chartLine
    }
  }
});
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>